import React from 'react'
import uuid from 'uuid'
import { buttonEdit, buttonAdd,buttonDelete, checkRight } from '../../../public/js/public'
import * as AlertUtil from '../../../public/js/alertUtil'
import * as FormUtil from '../../../public/js/formUtil'
import MenuEdit from './MenuEdit'

export default class MenuList extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            treeId: uuid.v4(),
            operator: '',
            parentId: 0,
            menuId: -1,
            modalId: uuid.v4()
        }
    }

    getTreeSetting() {
        let that = this
        return {
			data: {
				key : {
					name: "name",
                    title: "name",
                    isParent: "parent"
				},
				simpleData: {
					enable: true,
					idKey: "id",
					pIdKey: "parentId"
				}
			},
			async: {
				enable: true,
				url: domainName + '/menus/treeData',
                autoParam:["id","parentId"],
                type: 'get'
            },
            callback: {
                onClick: function(event, treeId, treeNode) {
                    that.setState({
                        menuId: treeNode.id,
                        operator: 'edit'
                    })
                }
            },
            view: {
                showIcon: true
            }
        }
    }

    initTree() {
       let setting = this.getTreeSetting()
       $.fn.zTree.init($("#" + this.state.treeId), setting)
    }

    componentDidMount() {
        this.initTree()
    }
    
    add() {
        let selectNodes =  $.fn.zTree.getZTreeObj(this.state.treeId).getSelectedNodes()
        if(selectNodes.length == 0) {
            AlertUtil.alert('提示','选择父节点')
            return 
        }

        this.setState({
            operator: 'add',
            parentId: selectNodes[0].id 
        })
    }

    saveSuccessCallback() {
        let treeObj = $.fn.zTree.getZTreeObj(this.state.treeId), selectNodes =  treeObj.getSelectedNodes()
        treeObj.reAsyncChildNodes(selectNodes[0], "refresh");
        this.setState({
            operator: 'reset'
        })
    }

    refresh() {
        let tree = $.fn.zTree.getZTreeObj(this.state.treeId)
        tree.reAsyncChildNodes(null, 'refresh')
    }

    delete() {
        let treeObj = $.fn.zTree.getZTreeObj(this.state.treeId), selectNodes =  treeObj.getSelectedNodes()
        if(selectNodes.length == 0) {
            AlertUtil.alert('提示','请选择要删除的菜单!')
            return ;
        }
        
        AlertUtil.confirm('删除提示','确定要删除该菜单吗',()=>{
            FormUtil.del(domainName + "/menus/" + selectNodes[0].id,{},()=>{
                AlertUtil.alert('提示','删除成功！',()=>{
                    treeObj.removeNode(selectNodes[0])
                    this.setState({
                        operator: 'reset'
                    })
                });
            })
        })
    }

    renderAdd() {
        if(checkRight('back:menu:save')) {
            return (<button  className="btn btn-primary btn-sm waves-effect waves-light m-r-5" onClick={this.add.bind(this)}>添加</button>)
        }
    }

    renderDelete() {
        if(checkRight('back:menu:delete')) {
            return (
                <button  className="btn btn-danger btn-sm waves-effect waves-light m-r-5" onClick={this.delete.bind(this)}>删除</button>
            )
        }
    }

   

    routerEdit() {
        let treeObj = $.fn.zTree.getZTreeObj(this.state.treeId), selectNodes =  treeObj.getSelectedNodes()
        if(selectNodes.length == 0) {
            AlertUtil.alert('提示','请选择菜单节点')
            return ;
        }

        if(selectNodes[0].id == 0) {
            AlertUtil.alert('提示','不能选择根节点')
            return ;
        }
        this.props.history.push('/system/router/' + selectNodes[0].id)
    }

    render() {
        return (
           <div className="row">
                <div className="col-md-3">
                    <div className="card-body">
                        <div className="row">
                            <div className="form-group">
                                {this.renderAdd()}
                                {this.renderDelete()}
                                <button  className="btn btn-info btn-sm waves-effect waves-light m-r-5" onClick={this.refresh.bind(this)}>刷新</button>
                                <button  className="btn btn-success btn-sm waves-effect waves-light" onClick={this.routerEdit.bind(this)}>路由编辑</button>
                            </div>
                        </div>
                        <div className="row" style={{background:'#fff'}}>
                            <ul className="ztree" id={this.state.treeId}>
                            </ul>
                        </div>
                    </div>
                </div>
                <div className="col-md-9">
                    <MenuEdit id = { this.state.menuId } operator={ this.state.operator } parentId={this.state.parentId} callback = {this.saveSuccessCallback.bind(this)} />
                </div>
           </div>
        )
        
    }
}